<template>
	<textarea v-bind="$attrs" v-on:change="handlerChange" v-model="text"></textarea>
</template>

<script >
export default {
	name: 'ly-list-textarea',
	inheritAttrs: false,
	props: {
		defaultValue: {
			default: function () {
				return [];
			},
			type: Array,
		},
	},
	data: function () {
		return {
			text: '',
			value: [],
		};
	},
	methods: {
		handlerChange: function (e) {
			var list = e.target.value.split('\n');
			var tempList = [];
			for (let i = 0; i < list.length; i++) {
				const item = list[i];
				if (item.trim()) {
					tempList.push(item.trim());
				}
			}
			this.$emit('change', this.value, tempList);
			delete tempList.__ob__;
			this.value = tempList;
		},
	},
	mounted() {
		this.text = this.defaultValue.join('\n');
	},
};
</script>
<style>
</style>